<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>添加banner</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="../css/admin/font.css">
    <link rel="stylesheet" href="../css/admin/xadmin.css">
    <script type="text/javascript" src="../js/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/xadmin.js"></script>
    <script type="text/javascript" src="../js/checkAdmin.js"></script>
</head>

<body>
    
    <div class="layui-fluid">
        <div class="layui-row">
            <form class="layui-form">

                <div class="layui-form-item">
                    <label for="bTitle" class="layui-form-label">
                        <span class="x-red">*</span>书名</label>
                    <div class="layui-input-inline">
                        <input type="text" id="bTitle" name="bTitle" lay-verify="required" autocomplete="off"
                            class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="start_dt" class="layui-form-label">
                        <span class="x-red">*</span>开始时间</label>
                    <input type="text" id="start_dt" name="start_dt" class="layui-input " style="width:190px;" placeholder="开始时间">
                </div>
                <div class="layui-form-item">
                    <label for="end_dt" class="layui-form-label">
                        <span class="x-red">*</span>截至时间</label>
                    <input type="text" id="end_dt" name="end_dt" class="layui-input " style="width:190px;" placeholder="截至时间">
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">
                        <span class="x-red">*</span>权重</label>
                    <div class="layui-input-inline">
                        <select name="ba_level" id="ba_level" lay-filter="category" lay-search="">
                            <option value="1" selected>1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                        </select>
                    </div>
                </div>
                <div class="layui-upload" style="padding-left: 110px;">
                    <button type="button" class="layui-btn layui-btn-danger" id="test1">
                        <i class="layui-icon"></i>banner图片</button>
                    <div class="layui-inline layui-word-aux">
                        限制 必须为750*300尺寸 </div>
                    <div class="layui-upload-list" style="max-width: 60%;">
                        <img class="layui-upload-img" id="demo1">
                        <p id="demoText"></p>
                        <input type="text" id="baPicture" value="" name="baPicture" style="display:none" />
                    </div>
                </div>

                <div class="layui-form-item">
                    <label for="" class="layui-form-label"></label>
                    <div class="layui-btn" lay-filter="add" id="addBtn" lay-submit="">添加</div>
                </div>
            </form>
        </div>
    </div>
</body>
</html>
<script>
    layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'], function () {
        var laydate = layui.laydate //日期
            , laypage = layui.laypage //分页
            , layer = layui.layer //弹层
            , table = layui.table //表格
            , carousel = layui.carousel //轮播
            , upload = layui.upload //上传
            , element = layui.element //元素操作
            , slider = layui.slider //滑块
            , $ = layui.jquery
            , form = layui.form // 表单


        laydate.render({
            elem: '#start_dt' //指定元素
            , type: 'datetime'
            , value: new Date()
        });
        laydate.render({
            elem: '#end_dt' //指定元素
            , type: 'datetime'
            , value: layui.util.toDateString(new Date().getTime() + 86400000, 'yyyy-MM-dd HH:mm:ss')
        });

        var checkerbTitle = 0;
        // 保证书名的唯一性
        $('#bTitle').blur(function () {
            $.ajax({
                url: "http://127.0.0.1:8001/after/book/showByBTitle"
                , type: "get"
                , data: {
                    "bTitle": $('#bTitle').val()
                }
                , success: function (datas) {
                    console.log(datas)
                    if (datas.count == 0) {
                        layer.msg('书名不存在，请输入正确书名', { time: 1000 });
                        checkerbTitle = 0;
                        return false;
                    }
                    checkerbTitle = 1;
                }
            });
        })

        // 图片上传
        let checkerPic = 0;
        upload.render({
            elem: '#test1'
            , url: 'http://127.0.0.1:8001/common/uploadPic' //改成您自己的上传接口
            , data: {
                type_img: 2
            }
            , size: 500
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            , done: function (res) {
                console.log(res)
                console.log(res.data)
                if (res.code == 200) {
                    console.log(res.data)
                    // 将地址赋给input框，方便获取
                    $('#baPicture').val(res.data);
                    checkerPic = 1;
                    return layer.msg("上传成功");
                }else if (res.code == -1) {
                    // 将地址赋给input框，方便获取
                    $('#baPicture').val(null);
                    return layer.msg('banner图不能为空');
                }else if (res.code == 500) {
                    $('#baPicture').val(null);
                    // 将地址赋给input框，方便获取
                    return layer.msg('上传失败');
                }
                layer.msg('后台崩溃，请联系研发人员');
            }
        });


        //监听提交
        form.on('submit(add)', function (data) {
            console.log($('#bTitle').val(),checkerbTitle,checkerPic)
            if ($('#bTitle').val() &&
                checkerPic == 1 &&
                checkerbTitle == 1) {
                $('#addBtn').addClass("layui-btn-disabled").attr("disabled", false);
                $.ajax({
                    url: "http://127.0.0.1:8001/banner/addBanner"
                    , type: "post"
                    , contentType: 'application/json;charset=UTF-8'
                    , data: JSON.stringify(data.field)
                    , success: function (datas) {
                        if (datas.data != null) {
                            layer.alert("添加成功", {
                                    icon: 6
                                },
                                function () {
                                    // 获取父窗口
                                    window.parent.location.reload();
                                    // 获得frame索引
                                    var index = parent.layer.getFrameIndex(window.name);
                                    //关闭当前frame
                                    parent.layer.close(index);
                                });
                            return false;
                        }
                    }
                    , error: function () {
                        alert("添加失败！！！")
                    }
                });
            } else {
                layer.msg('请更正书籍信息', { time: 2000 });
            }

        });

    });
</script>
